<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Feature, Map, View} from 'ol'
    import {Vector as VectorSource, XYZ} from 'ol/source'
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
    import {Point} from 'ol/geom'
    import {Circle as CircleStyle, Stroke, Style} from 'ol/style'
    import {easeOut} from 'ol/easing';
    import {getVectorContext} from 'ol/render';
    import gz from '../data/广州市'

    export default {
        name: 'ProjectDynamicCircle',
        props: {},
        mounted() {

            //初始化地图
            this.tileLayer = new TileLayer({
                source: new XYZ({
                    url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' +
                        'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
                })
            });
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    this.tileLayer
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688],   //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 5   //缩放到的级别
                })
            });

            //矢量数据源与数据图层
            this.source = new VectorSource();
            this.vector = new VectorLayer({
                zIndex: 9999,
                source: this.source
            });
            this.map.addLayer(this.vector);

            //初始动画间隔时间
            let duration = 1000;
            //初始半径
            let radius = 1;
            //添加随机动态要素点
            this.addRandomFeature(duration, radius)

            this.map.getView().fit([112.950439453125, 22.510986328125, 114.06005859375, 23.939208984375], this.map.getSize());
        },
        methods: {
            addRandomFeature(duration, radius) {
                let features = gz.features;
                let geometries = [];
                for (const feature of features) {
                    let center = feature.properties.center;
                    //创建广州每个区的中心点位置
                    let geom = new Point(center);
                    let pointFeature = new Feature(geom);
                    //设置圆点的样式
                    const image = new CircleStyle({
                        radius: 2,
                        fill: null,
                        stroke: new Stroke({
                            color: 'red',
                            width: 1
                        }),
                    });

                    pointFeature.setStyle(new Style({
                        image: image,
                    }))
                    geometries.push(pointFeature);
                }
                //将所有的点要素数据添加到矢量图层中
                this.source.addFeatures(geometries);

                //添加矢量图层数据的动画
                this.flash(this.source, duration, radius);
            },
            flash(source, duration, radius) {
                //当前时间
                let start = new Date().getTime();
                //进行地图水波渲染
                this.tileLayer.on('postrender', animate);

                let _this = this;

                function animate(event) {
                    //获取几何图形
                    let vectorContext = getVectorContext(event);
                    //获取当前渲染帧状态
                    let frameState = event.frameState;
                    //渲染当前帧与渲染开始时间差
                    let elapsed = frameState.time - start;
                    //已占比率
                    let elapsedRatio = elapsed / duration;
                    // radius半径为5结束为10
                    radius = easeOut(elapsedRatio) * 5 + 5;
                    //不透渐变消失
                    let opacity = easeOut(1 - elapsedRatio);
                    //Circle样式
                    let style = new Style({
                        image: new CircleStyle({
                            radius: radius,
                            stroke: new Stroke({
                                color: 'rgba(255, 0, 0, ' + opacity + ')',
                                width: 1 + opacity
                            })
                        })
                    });
                    //给几何图形添加样式
                    vectorContext.setStyle(style);
                    if (elapsed > duration) {
                        start = frameState.time;
                    }
                    //将几何体渲染到画布中
                    let features = source.getFeatures();
                    for (const feature of features) {
                        let geom = feature.getGeometry();
                        vectorContext.drawGeometry(geom);
                    }

                    //请求地图渲染（在下一个动画帧处）
                    _this.map.render();
                }
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
